<!doctype html>
<html dir="<%= @direction %>" lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><%= yield(:page_title) %></title>
  <link rel="stylesheet" type="text/css" href="<%= digest_path('stylesheets/style.css') %>" data-turbo-track="reload">
  <link rel="stylesheet" type="text/css" href="<%= digest_path('stylesheets/print.css') %>" media="print">
  <link rel="stylesheet" type="text/css" href="<%= digest_path('stylesheets/highlight.css') %>" data-turbo-track="reload">

  <link rel="icon" href="images/favicon.ico" sizes="any">

  <link rel="apple-touch-icon" href="images/icon.png">

  <link rel="canonical" href="<%= canonical_url(@path) %>">

  <script src="<%= digest_path('javascripts/@hotwired--turbo.js') %>" data-turbo-track="reload"></script>
  <script src="<%= digest_path('javascripts/clipboard.js') %>" data-turbo-track="reload"></script>
  <script src="<%= digest_path('javascripts/guides.js') %>" data-turbo-track="reload"></script>

  <meta property="og:title" content="<%= yield(:page_title) %>" />
  <meta name="description" content="<%= yield(:description) %>" />
  <meta property="og:description" content="<%= yield(:description) %>" />
  <meta property="og:locale" content="en_US" />
  <meta property="og:site_name" content="Ruby on Rails Guides" />
  <meta property="og:image" content="https://avatars.githubusercontent.com/u/4223" />
  <meta property="og:type" content="website" />

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Noto+Sans+Arabic:wght@100..900&display=swap" rel="stylesheet">

  <meta name="theme-color" content="#C81418">
</head>

<body dir="<%= @direction %>" class="guide no-js">
  <script>
    document.body.classList.remove('no-js')
  </script>

  <a id="main-skip-link" href="#main" class="skip-link" data-turbo="false">
    Skip to main content
  </a>

  <div id="mobile-navigation-bar">
    <div class="wrapper">
      <strong class="more-info-label">More at <a href="https://rubyonrails.org/">rubyonrails.org:</a> </strong>
      <button type="button" class="js-only red-button more-info-button" id="more-info" aria-controls="more-info-links" aria-expanded="false">
        More Ruby on Rails
      </button>
      <ul id="more-info-links" class="more-info-links hidden">
        <li class="more-info"><a href="https://rubyonrails.org/blog">Blog</a></li>
        <li class="more-info"><a href="https://guides.rubyonrails.org/">Guides</a></li>
        <li class="more-info"><a href="https://api.rubyonrails.org/">API</a></li>
        <li class="more-info"><a href="https://discuss.rubyonrails.org/">Forum</a></li>
        <li class="more-info"><a href="https://github.com/rails/rails">Contribute on GitHub</a></li>
      </ul>
    </div>
  </div>

  <header id="page-header">
    <div class="wrapper clearfix">
      <nav id="feature-nav">
        <div class="header-logo">
          <a href="index.html" title="Guides home for <%= @edge.present? ? 'Edge' : @version %> Guides">Guides</a>
          <span id="version-switcher" class="js-only">
            <label for="version-switcher-select">Version: <span class="visibly-hidden">pick from the list to go to that Rails version's guides</span></label>
            <select id="version-switcher-select" class="guides-version">
              <option value="https://edgeguides.rubyonrails.org/"<%= " selected" if @edge %>>Edge</option>
              <% %w[8.1 8.0 7.2 7.1 7.0 6.1 6.0 5.2 5.1 5.0 4.2 4.1 4.0 3.2 3.1 3.0 2.3].each do |version| %>
                <option value="https://guides.rubyonrails.org/v<%= version %>/<%= @path %>"<%= " selected" if @version&.start_with?("v#{version}") %>><%= version %></option>
              <% end %>
            </select>
          </span>
        </div>
        <ul class="nav">
          <li><a class="nav-item" id="home_nav" href="https://rubyonrails.org/">Home</a></li>
          <li class="guides-index guides-index-large">
            <a href="index.html" id="guides-menu-button" role="button" aria-controls="guides" aria-expanded="false" class="guides-index-item nav-item">Guides Index</a>
            <div id="guides" class="clearfix" style="display: none;">
              <hr />
              <dl class="guides-section-container">
                <% documents_by_section.each do |section| %>
                  <div class="guides-section">
                    <dt><%= section['name'] %></dt>
                    <% finished_documents(section['documents']).each do |document| %>
                    <dd><a href="<%= document['url'] %>"><%= document['name'] %></a></dd>
                    <% end %>
                  </div>
                <% end %>
              </dl>
            </div>
          </li>
          <li><a class="nav-item" href="contributing_to_ruby_on_rails.html">Contribute</a></li>
          <li class="guides-index guides-index-small js-only">
            <label for="guides-selector">
              Navigate to a guide:
            </label>
            <select id="guides-selector" class="guides-index-item nav-item">
              <option value="index.html">Guides Index</option>
              <% docs_for_menu.each do |section| %>
                <optgroup label="<%= section['name'] %>">
                  <% finished_documents(section['documents']).each do |document| %>
                    <option value="<%= document['url'] %>"><%= document['name'] %></option>
                  <% end %>
                </optgroup>
              <% end %>
            </select>
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <hr class="hide" />

  <main id="main">
    <article>
      <header id="feature">
        <div class="wrapper">
          <%= yield :header_section %>

          <%= yield :index_section %>
        </div>
      </header>

      <div class="wrapper">
        <div id="column-main">
          <section id="article-body">
            <%= yield %>
          </section>

          <hr>

          <%# Despite the footer having a label, this element is not detected as
              a region in all screen readers. Explicitly marking it as one works %>
          <footer aria-labelledby="heading-feedback" role="region">
            <h2 id="heading-feedback">Feedback</h2>
            <p>
              You're encouraged to help improve the quality of this guide.
            </p>
            <p>
              Please contribute if you see any typos or factual errors.
              To get started, you can read our <%= link_to 'documentation contributions', 'https://edgeguides.rubyonrails.org/contributing_to_ruby_on_rails.html#contributing-to-the-rails-documentation' %> section.
            </p>
            <p>
              You may also find incomplete content or stuff that is not up to date.
              Please do add any missing documentation for main. Make sure to check
              <%= link_to 'Edge Guides', 'https://edgeguides.rubyonrails.org' %> first to verify
              if the issues are already fixed or not on the main branch.
              Check the <%= link_to 'Ruby on Rails Guides Guidelines', 'ruby_on_rails_guides_guidelines.html' %>
              for style and conventions.
            </p>
            <p>
              If for whatever reason you spot something to fix but cannot patch it yourself, please
              <%= link_to 'open an issue', 'https://github.com/rails/rails/issues' %>.
            </p>
            <p>And last but not least, any kind of discussion regarding Ruby on Rails
              documentation is very welcome on the <%= link_to 'official Ruby on Rails Forum', 'https://discuss.rubyonrails.org/c/rubyonrails-docs' %>.
            </p>
          </footer>
        </div>
      </div>
    </article>
  </main>

  <hr class="hide" />

  <footer id="complementary">
    <div class="wrapper">
      <%= render 'license' %>
    </div>
  </footer>

  <a href="#main-skip-link" class="back-to-top" data-turbo="false"><span class="visibly-hidden">Back to top</span></a>
</body>
</html>
